<template>
  <div>
    <ElButton>RoundThird</ElButton>
    <h2>v-for 和 v-if</h2>
    <!-- v-if 作用在标签上 可以使该标签及其子标签出现0到1次 -->
    <ElButton v-if="age > 18">成年人</ElButton>
    <ElButton v-if="age <= 18">未成年</ElButton>
    <ElButton v-if="sex">男</ElButton>
    <ElButton v-else>女</ElButton>
    <ElButton v-show="sex">男性</ElButton>
    <!-- 不建议 v-if 和v-for 同时作用在一个标签上 
      如果必须出现则引入template -->
    <ul>
      <li v-for="(e, i) in people" :key="i" abc="abc">
        <span>{{ e.name }}</span>
        <ElButton type="success">{{ e.age }}</ElButton>
      </li>
    </ul>
    <!-- template标签 是虚拟标签，不会进入最终html文件中 -->
    <ul>
      <template v-for="(e, i) in people" :key="i">
        <li abc="def">
          <span>{{ e.name }}</span>
          <ElButton type="success">{{ e.age }}</ElButton>
        </li>
      </template>
    </ul>
    <template v-if="age > 18">
      <div>成年人</div>
    </template>

    <template v-for="(e, i) in people" :key="i">
      <ElButton v-if="e.age < 30">{{ e.name }}</ElButton>
    </template>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default {
  name: 'RoundThird',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      age: 20,
      sex: false,
      people: [
        { name: 'zhangsan', age: 11 },
        { name: 'lisi', age: 14 },
        { name: 'wangwu', age: 49 }
      ]
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
